<template>
  <div v-show="!LoginOrResign">
      <div id="ResignBox" :class="isDark?'dark':''">
            <div id="title">
                <span>注册</span>
            </div>
            <div id="loginName">
                <div class="icon">
                    <img src="../../assets/LoginAndResign/icon_zh.png" alt="">
                </div>
                <div class="login">
                    <input type="text" name="" id="" placeholder="请输入您的账户名称" ref="account">
                </div>
            </div>
            <div id="loginPassword">
                <div class="icon">
                    <img src="../../assets/LoginAndResign/icon_mm.png" alt="">
                </div>
                <div class="login" >
                    <input type="password" name="" id="PW2" placeholder="设置长度至少6位的密码" ref="passwordA">
                </div>
            </div> 
            <div id="loginPassword">
                <div class="icon">
                    <img src="../../assets/LoginAndResign/icon_mm.png" alt="">
                </div>
                <div class="login">
                    <input type="password" name="" id="PW3" placeholder="再次输入长度至少6位密码" ref="passwordB">
                </div>
            </div> 
            <div id="toLogin" @click="toLogin">
                <span>登录</span>
            </div>
        </div>
        <div id="button" @click="Resign">
            <span>注册</span>
        </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Message,Loading } from 'element-ui'
export default {
    name:'Login',
    data() {
        return {
            isDark:false,
            passCanBeSee:false,
        }
    },
    mounted(){
        this.$bus.$on('DarkOrLight',(data)=>{
            this.isDark = data
        })
    },
    computed:{
        ...mapState(['LoginOrResign']),
    },
    methods: {
        toLogin(){
            this.$store.commit('LoginOrResign',true)
        },
        async checkAccount(account){
            let loadingInstance = Loading.service();
            let str = account;
            const reg = /^(\d+[a-zA-Z]+|[a-zA-Z]+\d+)([0-9a-zA-Z]*)$/;
            if(reg.test(str) == false){
               await Message({
                    showClose: true,
                    message: '账号需要包含数字和字母',
                    type: 'error'
                });
                loadingInstance.close();
                return false;
            }else{
                return true
            }
        },
        async checkPassWord(pA,pB){
            let loadingInstance = Loading.service();
            //console.log(pA,pB)
            let strA = pA;
            let strB = pB;
            // 密码必须由 8-64位字母、数字、特殊符号组成
            var reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\\/]).{8,64}$/;
            //对密码进行判断 是否相等 是否长度大于6 是否包含数字和英文和特殊字符
            if(strA === strB){
                let str = strA;
                if(str.length>=6&&reg.test(str)){
                    return true;
                }else{
                    await Message({
                        showClose: true,
                        message: '密码需要长度大于6，且包含数字、英文和字符',
                        type: 'warning'
                    });
                    loadingInstance.close();
                    return false;
                }
            }else{
                await Message({
                    showClose: true,
                    message: '两次密码不一致',
                    type: 'warning'
                });
                loadingInstance.close();
                return false;
            }

        },
        async Resign(){
            let account = this.$refs.account.value;
            let passwordA = this.$refs.passwordA.value;
            let passwordB = this.$refs.passwordB.value;
            let loadingInstance = Loading.service({ fullscreen: true });
            //先做个简单的不为空判断
            if(account&&passwordA&&passwordB){
                let checkAccountBoolean =  await this.checkAccount(account);
                let checkPassWordBoolean =  await this.checkPassWord(passwordA,passwordB);
                //此时判断函数的返回值是否都为真，都为真的话证明账户密码合理
                if(checkAccountBoolean&&checkPassWordBoolean){
                    const data = {
                        "account":account,
                        "password":passwordA
                    }
                    this.$axios.post('https://qc3atp.api.cloudendpoint.cn/Resign',data)
                    .then(res=>{
                        //console.log(res)
                        if(res.data.insertUser.msg == '添加成功'){
                            Message({
                                showClose: true,
                                message: '注册成功',
                                type: 'success'
                            });
                            this.$refs.account.value = '';
                            this.$refs.passwordA.value = '';
                            this.$refs.passwordB.value = '';
                            this.$bus .$emit('closeLoginOrResign',false)
                            loadingInstance.close();
                        }else{
                            Message({
                                showClose: true,
                                message: '用户名已经存在',
                                type: 'error'
                            });
                            loadingInstance.close();
                        }

                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }
            }else{
                Message({
                    showClose: true,
                    message: '账户或密码不能为空',
                    type: 'warning'
                });
                loadingInstance.close();
            }
        },
        succesfulResign(){

        }
    },
}
</script>

<style scoped lang="css">
    #LoginOrResgin{
        position: relative;
    }
    #title{
        font-size: 18px;
        font-weight: 600;
        margin: 20px 10px ;
    }
    #LoginsBox,#ResignBox{
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }
    #loginName,#loginPassword{
        width: 100%;
        height: 60px;
        margin: 20px auto;
        background:rgba(153, 153, 153, 0.466) ;
        border-radius: 10px;
        position: relative;
    }
    .icon{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 25px;
    }
    .kejian{
        right: 25px!important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .login{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .login input{
        width: 60%;
        height: 55%;
        background-color: transparent;
        border: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
    }
    #repassword{
        width: 20px;
        height: 20px;
        margin: 0 5px 0 5px;
        background: url(../../assets/LoginAndResign/icon_nor.png) no-repeat center;
        background-size: 100% 100%;
        outline: none;
        appearance: none;  
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    #repassword:checked{
        background: url(../../assets/LoginAndResign/icon_sel.png) no-repeat center;
    }
    .repassword{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display:inline-block;
        left: 30px;
        font-size: 12px;
    }
    .btnForRemberPW{
        height: 30px;
        position: relative;
        width: 85%;
        float: left;
    }
    #toResign{
        float: left;
        height: 30px;
        cursor: pointer;
    }
    #toLogin{
        float: right;
        margin-right:18px;
        cursor: pointer;
    }
    #toResign span,#toLogin span{
        line-height: 30px;
        font-size: 12px;
    }
    
    .dark{
        color: #fff!important;
    }
    #button{
        width: 68%;
        height: 40px;
        position: absolute;
        transform:  translateX(-50%);
        left: 50%;
        bottom: -100px;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        background: rgba(153, 153, 153, 0.466);
        font-size: 16px;
    }
</style>